<template>
  <div>
    <div>
      <el-steps :space="200" :active="1" finish-status="success" align-center>
        <el-step title="已完成">1</el-step>
        <el-step title="进行中">2</el-step>
        <el-step title="填写采购计划">3</el-step>
        <el-step title="上传附件">4</el-step>
      </el-steps>
      <div style="color: #4A5064; background-color: #C7C7C7; height: 50px; width: 95%; text-align: center; border-radius: 4px;">
        <div style="font-family:'PingFangSC'; float: left; font-size: 25px; margin-top: 8px; margin-left: 10px">预算明细</div>
        <el-button type="info" style="float: right; margin-top: 5px; margin-right: 10px" @click="addDialogVisible = true">新增</el-button>
      </div>
    </div>

    <el-table
      :data="Budgetlist"
      border
      style="width: 95%">
      <el-table-column prop="budgetItem" label="预算事项" width="200"></el-table-column>
      <el-table-column prop="budgetNum" label="预算金额" width="180"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="操作" width="120px">
        <template slot-scope="scope">
          <!--修改按钮-->
          <el-tooltip class="item" effect="dark" content="修改" placement="top" :enterable="false">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.ticketId)"></el-button>
          </el-tooltip>
          <!--删除按钮-->
          <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeBudgetById(scope.row.ticketId)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!--添加预算对话框-->
    <el-dialog
      title="添加预算"
      :visible.sync="addDialogVisible"
      width="300px"
      @close="addDialogClosed">
      <el-form :model="addForm" :rules="addFormRules" label-width="80px" ref="addFormRef">
        <el-form-item label="方案编码" prop="planId">
          <el-input class="form-input" v-model="addForm.planId" disabled></el-input>
        </el-form-item>
        <el-form-item label="预算事项" prop="budgetItem">
          <el-input class="form-input" v-model="addForm.budgetItem"></el-input>
        </el-form-item>
        <el-form-item label="预算金额" prop="budgetNum">
          <el-input class="form-input" v-model="addForm.budgetNum"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="state">
          <el-input class="form-input" v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBudget">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改预算对话框-->
    <el-dialog
      title="修改预算"
      :visible.sync="editDialogVisible"
      width="300px"
      @close="editDialogClosed">
      <el-form :model="editForm" :rules="addFormRules" label-width="80px" ref="editFormRef">
        <el-form-item label="方案编码" prop="planId">
          <el-input class="form-input" v-model="editForm.planId" disabled></el-input>
        </el-form-item>
        <el-form-item label="预算事项" prop="budgetItem">
          <el-input class="form-input" v-model="editForm.budgetItem"></el-input>
        </el-form-item>
        <el-form-item label="预算金额" prop="budgetNum">
          <el-input class="form-input" v-model="editForm.budgetNum"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input class="form-input" v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editBudget">确 定</el-button>
      </span>
    </el-dialog>
    <p>
      <el-button type="primary" style="width: 100px" @click="toAddPlan">提交</el-button>
    </p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        Budgetlist: [],
        // 控制新增票据对话框的显示与隐藏
        addDialogVisible: false,
        // 控制修改票据对话框的显示与隐藏
        editDialogVisible: false,
        // 控制删除票据对话框的显示与隐藏
        deleteDialogVisible: false,
        addForm:{
          ticketId:'',
          planId: this.$root.planId,
          budgetItem:'',
          budgetNum:'',
          remark:'',
        },
        addFormRules:{
          budgetItem: [
            {
              required: true,
              message: '请输入预算事项',
              trigger: 'blur'
            }
          ],
          budgetNum: [
            {
              required: true,
              message: '请输入预算金额',
              trigger: 'blur'
            }
          ],
          remark: []
        },
        //查询到的用户对象
        editForm:{
          ticketId: 1,
          planId: this.$root.planId,
          budgetItem: '',
          budgetNum: '',
          remark: ''
        },
      }
    },

    created () {
      this.getBudgetList()
      console.log(this.$root.planId)
    },
    methods: {
      toAddPlan () {
        this.$router.push({ path: '/addPlan' })
      },
      //监听添加用户对话框的关闭事件
      addDialogClosed(){
        this.$refs.addFormRef.resetFields()
      },
      //监听修改用户对话框的关闭事件
      editDialogClosed(){
        this.$refs.editFormRef.resetFields()
      },
      addBudget(){
        this.$refs.addFormRef.validate(async valid => {
          if(!valid) return
          //校验通过发出添加请求
          await this.$http.post('add-budget', this.addForm);
          this.$message.success('添加预算成功！')
          this.addDialogVisible = false
          this.getBudgetList()
        })
      },

      getBudgetList () {
        this.$http.get('budget-list', { params: this.addForm }).then(res=> {
          this.Budgetlist=[]
          for (var i = 1; i < res.data.length; i++) {
            this.Budgetlist.push(res.data[i])
          }
          this.total = res.data[0].number
        })
      },
      //展示编辑用户的对话框
      async showEditDialog (ticketId){
        this.editForm.ticketId = ticketId;
        //console.log(this.ticketId)
        let res = await this.$http.get('search-by-ticket-id',{ params:this.editForm})
        console.log(res);
        this.editForm = res.data;
        this.editDialogVisible = true
      },
      async editBudget(){
        let res = await this.$http.put('edit-budget', this.editForm);
        this.$message.success('修改预算成功！')
        this.editDialogVisible = false
        this.getBudgetList()
       },
      //根据ticketId删除对应信息
      async removeBudgetById(ticketId){
        this.editForm.ticketId = ticketId;
        //弹框询问是否删除
        const confirmResult = await this.$confirm('此操作将永久删除该预算条目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        //若确认删除则返回字符串confirm,取消则为cancel
        //console.log(confirmResult)
        if(confirmResult !== 'confirm'){
          return this.$message.info('已经取消删除')
        }
        //console.log('确认了删除')
        await this.$http.delete('delete-by-id', { params:this.editForm})
        this.$message.success('删除成功')
        this.getBudgetList()
      }
     },
  }
</script>
